<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热词</title>
	<script src="../components/echarts-4.0.4.min.js"></script>
	<style>
		body,html{
			padding: 0;
			margin: 0;
			background:#0A0F23;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
<div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
    var turnover = echarts.init(document.getElementById('turnover'));
    var barOption = {
        title : {
            text: '2017年知识交易流动情况',
            left: 'center',
            top:"5%",
            textStyle: {
                color: '#fff',
                fontSize: 22
            }
        },
        legend: {
            show: true,
            data:['商标买','商标卖','专利买','专利卖','技术买','技术卖'],
            left: 'center',
            bottom:"3%",
            textStyle: {
                color: '#fff',
                fontSize:16
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            top:'15%',
            containLabel: true
        },
        color: ['#336c9c','#4fac88','#8ce8e7','#17d4ee','#62cff1','#59c293','#67c47b'],
        xAxis : [
            {
                type : 'category',
                data : ['事业单位','个人','大专院校','企业','科研院所'],
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: true
                }
            }
        ],
        series : [
            {
                name: '商标买',
                type:'bar',
                barGap:0,
                data: [20, 33, 31, 34, 39],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:"#fff"
                    }
                }
            },
            {
                name: '商标卖',
                type:'bar',
                barGap:0,
                data: [14, 23, 11, 24, 19],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:"#fff"
                    }
                }
            },
            {
                name:'专利买',
                type:'bar',
                barGap:0,
                data: [36, 23, 11, 21, 31],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:"#fff"
                    }
                }
            },
            {
                name:'专利卖',
                type:'bar',
                barGap:0,
                data: [30, 33, 31, 14, 23],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:"#fff"
                    }
                }
            },
            {
                name: '技术买',
                type:'bar',
                barGap:0,
                data: [20, 23, 21, 14, 13],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:"#fff"
                    }
                }
            },
            {
                name: '技术卖',
                type:'bar',
                barGap:0,
                data: [26, 33, 31, 34, 33],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:"#fff"
                    }
                }
            }
        ]
    };

    turnover.setOption(barOption);
</script>
</html>